/**
 * 获取截图的image
 * @param src
 * @param cutObj
 * @param getDataFn
 */
export const cutImage = function (src, cutObj, getDataFn) {
  const img = document.createElement('img')
  img.style = 'max-width: 100%; display: none;'
  img.id = 'hideImage4Cut'
  img.src = src
  img.onload = () => {
    let canvas = document.createElement('canvas')
    const {top, left, width, height} = cutObj;
    canvas.width = width
    canvas.height = height

    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, top, left, width, height, 0, 0, width, height)
    let data = canvas.toDataURL()
    getDataFn && getDataFn(data)
  }
}

/**
 * 影像遮罩
 * @param src
 * @param cutObj
 * @param getDataFn
 */
export const showImageRedRect = function (src, cutObj, getDataFn) {
  const img = document.createElement('img')
  img.id = 'hideImage4RedRect'
  img.src = src
  img.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = img.width;
    canvas.height = img.height;

    const {top, left, width, height} = cutObj;
    let ctx = canvas.getContext('2d')
    // 画红框
    ctx.drawImage(img, 0, 0)
    ctx.fillStyle = 'rgba(255, 0, 0, 0.2)'
    ctx.fillRect(top, left, width, height);
    let data = canvas.toDataURL()
    getDataFn && getDataFn(data)
  }

  document.body.appendChild(img);
}
